<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html style="width: 100%;height: 100%">
<head>
    <title>Smart Wheel Chart Display</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css"/>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>

</head>
<body>
<div style="height: 280px; width: 100%" id="map"></div>
<script type="text/javascript">
    var osm = L.tileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'openstreetmap',
        maxZoom: 18
    });

    var trackIn = L.tileLayer('/smart-wheel/img/tiles/<%=request.getParameter("uid")%>/speed/{z}/{x}/{y}.png', {
        attribution: 'openstreetmap',
        maxZoom: 18
    });


    var baseMaps = {
        "OSM": osm
    };

    var overlayMaps = {
        "TrackIn": trackIn
    };

    var map = L.map('map', {
        center: new L.LatLng(46.7693367, 23.6105634),
        zoom: 15,
        layers: [osm]
    });
    L.control.layers(baseMaps, overlayMaps).addTo(map);
</script>
</body>
</html>
